<template>
  <div class="refine_sfcreateaircraft">
    <h2 class="titleblue">{{title}}</h2>
    <div class="contant">
      <el-form ref="form" :model="form" label-width="100px">
        <el-row>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="停靠点(纬度)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lat.latitude1"></el-input>
                <sup>°</sup>
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lat.latitude2"></el-input>
                <sup>'</sup>
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lat.latitude3"></el-input>
                <sup>"</sup>
                <el-select :disabled="detail=='look'?true:false" v-model="lat.latitude4" placeholder=""
                           class="select-width-60">
                  <el-option label="N" value="N"></el-option>
                  <el-option label="S" value="S"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="(经度)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lon.longitude1"></el-input>
                <sup>°</sup>
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lon.longitude2"></el-input>
                <sup>'</sup>
                <el-input :disabled="detail=='look'?true:false" class="select-width-60"
                          v-model="lon.longitude3"></el-input>
                <sup>"</sup>
                <el-select :disabled="detail=='look'?true:false" v-model="lon.longitude4" placeholder=""
                           class="select-width-60">
                  <el-option label="E" value="E"></el-option>
                  <el-option label="W" value="W"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="搜救机构">
                <el-select :disabled="detail=='look'?true:false" v-model="organization" class="select-width-280">
                  <el-option v-for="item in dpOption" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="单位">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.company"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="电话">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.telephone"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="联系人">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.contact"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="机号">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.machineNo"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="机型">
                <el-select :disabled="detail=='look'?true:false" clearable v-model="form.model" class="select-width-280"
                           @change="jxChange">
                  <el-option v-for="item in jxOptions" :key="item.value" :label="item.name" :value="item.id">
                  </el-option>
                </el-select>
                <!-- <el-input  class="select-width-280" v-model="form.model" placeholder=""></el-input> -->
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="最大航程">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.maxVoyage"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="成员人数">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.maxMan"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="最大飞行速度(kts)" class="line-height-25">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.maxFlight"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="12">
            <div class="grid-content">
              <el-form-item label="巡航速度(节)">
                <el-input :disabled="detail=='look'?true:false" class="select-width-280" v-model="form.cruSpeed"
                          placeholder=""></el-input>
              </el-form-item>
            </div>
          </el-col>
          <el-col :span="23">
            <el-form-item label="备注">
              <el-input :disabled="detail=='look'?true:false" type="textarea" v-model="form.remark"
                        placeholder=""></el-input>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <div class="footerbtn" v-show="footerbtn">
        <el-button class="sure" @click="sure">确定</el-button>
        <el-button class="cancel" @click="cancel">取消</el-button>
      </div>
    </div>
  </div>
</template>

<script>
  import sosFlyDeviceService from '@/services/SosFlyDeviceService'
  import dictService from '@/services/DictionaryService.js'
  import coordinateTransform from '@/utils/coordinateTransform.js'

  export default {
    name: 'CreateAerocraft',
    props: ['id', 'detail', 'dpOptions', 'ptOptions', 'typeOptions', 'dpOption', 'jxOptions', 'navOption'],
    watch: {
      detail: function (value) {
        if (value == 'create') {
          this.footerbtn = true
          this.title = '新增飞行器'
        } else if (value == 'edit') {
          this.footerbtn = true
          this.title = '编辑飞行器'
        } else if (value == 'look') {
          this.footerbtn = false
          this.title = '飞行器详情'
        }
      }
    },
    data: function () {
      return {
        organization: '',
        form: {
          company: '', // 单位 ,
          contact: '', // 联系人 ,
          cruSpeed: '', // 巡航速度 ,
          latitude: '', // 停靠点(纬度) ,
          longitude: '', // 停靠点(经度) ,
          machineNo: '', // 机号 ,
          maxFlight: '', // 最大飞行速度 ,
          maxMan: '', // 成员人数 ,
          maxVoyage: '', // 最大航程 ,
          model: '', // 机型 ,
          name: '', // 名称 ,
          remark: '', // 备注 ,
          sosOrg: '', // 搜救机构 ,
          telephone: '' // 电话 ,
        },
        lat: {
          latitude1: '',
          latitude2: '',
          latitude3: '',
          latitude4: 'N',
        },
        lon: {
          longitude1: '',
          longitude2: '',
          longitude3: '',
          longitude4: 'E',
        },
        orgOption: [],
        title: '新增飞行器',
        footerbtn: true,
        detailId: null,
        createTime: null
      }
    },
    created () {
      var value = this.detail
      if (value == 'create') {
        this.footerbtn = true
        this.title = '新建飞行器'

      } else if (value == 'edit') {
        this.footerbtn = true
        this.title = '编辑飞行器'
        this.showDetail()
      } else if (value == 'look') {
        this.footerbtn = false
        this.title = '飞行器详情'
        this.showDetail()
      }
    },
    methods: {
      showDetail () {
        var data = this.$route.params
        for (let key in data) {
          if (key == 'id') {
            this.detailId = data[key]
          } else if (key == 'createTime') {
            this.createTime = data[key]
          } else if (key == 'latitude' && data[key]) {
            this.lat.latitude1 = data[key].split('°')[0]
            this.lat.latitude2 = data[key].split('°')[1].split('\'')[0]
            this.lat.latitude3 = data[key].split('°')[1].split('\'')[1].split('"')[0]
          } else if (key == 'longitude' && data[key]) {
            this.lon.longitude1 = data[key].split('°')[0]
            this.lon.longitude2 = data[key].split('°')[1].split('\'')[0]
            this.lon.longitude3 = data[key].split('°')[1].split('\'')[1].split('"')[0]
          } else if (key == 'sosOrg' && data[key]) {
            this.organization = data[key].id
          } else if (key == 'model' && data[key]) {
            this.form[key] = data[key] * 1
          } else {
            this.form[key] = data[key]
          }
        }
      },
      submit: function () {
      },
      jxChange () {
      },
      async sure () { // + '"' + this.lon.longitude4
        let latitude = ''
        let longitude = ''
        if (this.lat.latitude1 && this.lat.latitude2 && this.lat.latitude3) {
          latitude = coordinateTransform.change(this.lat.latitude1 + '°' + this.lat.latitude2 + '\'' + this.lat.latitude3, 'toDeg')
        }
        if (this.lon.longitude1 && this.lon.longitude2 && this.lon.longitude3) {
          longitude = coordinateTransform.change(this.lon.longitude1 + '°' + this.lon.longitude2 + '\'' + this.lon.longitude3, 'toDeg')
        }
        let sosOrg = null
        await this.dpOption.forEach(item => {
          if (item.id == this.organization) {
            sosOrg = item
          }
        })
        let obj = {
          company: this.form.company,
          contact: this.form.contact,
          cruSpeed: this.form.cruSpeed,
          latitude,
          longitude,
          machineNo: this.form.machineNo,
          maxFlight: this.form.maxFlight,
          maxMan: this.form.maxMan,
          maxVoyage: this.form.maxVoyage,
          model: this.form.model,
          name: this.form.name,
          remark: this.form.remark,
          sosOrg,
          telephone: this.form.telephone
        }
        if (this.title == '编辑飞行器') {
          obj.id = this.detailId
          obj.createTime = this.createTime
          sosFlyDeviceService.update(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '修改成功!'
              })
              this.$emit('close')
            }
          })
        } else {
          sosFlyDeviceService.createFly(obj).then(res => {
            if (res) {
              this.$message({
                type: 'success',
                message: '创建成功!'
              })
              this.$emit('close')
            }
          })
        }
      },
      cancel () {
        this.$emit('close')
      },
      getData (id) {
        this.$axios.get(this.$config['detailSosVehile'], {
          params: {
            skey: localStorage.getItem('auth'),
            d_id: this.id
          }
        }).then((res) => {
          if (res.data.content) {
            this.form = res.data.content
            var lat1 = this.form.latitude.indexOf('°')
            var lat2 = this.form.latitude.indexOf('\'')
            var lat3 = this.form.latitude.indexOf('"')
            var lat4 = this.form.latitude.slice(this.form.latitude.length - 1, this.form.latitude.length)

            var lon1 = this.form.longitude.indexOf('°')
            var lon2 = this.form.longitude.indexOf('\'')
            var lon3 = this.form.longitude.indexOf('"')
            var lon4 = this.form.longitude.slice(this.form.longitude.length - 1, this.form.longitude.length)

            if (lon1) {
              this.lon.longitude1 = this.form.longitude.slice(0, lon1)
            }
            if (lon2) {
              this.lon.longitude2 = this.form.longitude.slice(lon1 + 1, lon2)
            }
            if (lon3) {
              this.lon.longitude3 = this.form.longitude.slice(lon2 + 1, lon3)
            }
            if (lon4) {
              this.lon.longitude4 = lon4
            }
            if (lat1) {
              this.lat.latitude1 = this.form.latitude.slice(0, lat1)
            }
            if (lat2) {
              this.lat.latitude2 = this.form.latitude.slice(lat1 + 1, lat2)
            }
            if (lat3) {
              this.lat.latitude3 = this.form.latitude.slice(lat2 + 1, lat3)
            }
            if (lat4) {
              this.lat.latitude4 = lat4
            }
            for (var x of this.sjjx) {

              if (x.d_id == this.form.model) {
                this.form.model = x.name
                break
              }

            }
          }
        })

      },
    }
  }
</script>

<style scoped lang="scss">
  .refine_sfcreateaircraft {
    width: 100%;
    display: inline-block;
    padding-bottom: 50px;

    .el-form {
      width: 80%;
      margin: 0 auto;
    }

    .el-input__suffix {
      margin-right: 0px;
    }

    .el-select.select-width-60 input {
      text-align: left;
      padding-left: 10px;
    }

    .select-width-60 {
      text-align: center;

      input {
        text-align: center;
        padding: 0px;
      }

    }

    .footerbtn {
      margin-top: 50px;
    }

  }
</style>
